<template>
	<div class="index-wrap">
  <div v-title style="display: none">初驾</div>
   <div v-show="indexpage">
    <div class="index-header">
		  <swipe class="index-swipe" :showIndicators="true">
        <swipe-item v-for="item in imgs" :key="item.id"><img :src="item.imgurl"></swipe-item>
      </swipe>
      <div class="location">
        <div class="iconl"></div>
        <span id="location">{{ areaname }}</span>
      </div>
    </div>

    <navbar></navbar>

    <div class="index-class">
      <div class="class-headline">
        <headline headline="班别选择"></headline>
        <router-link to="/choseclass/1">查看更多<div class="icon-more"></div></router-link>
      </div>
      <div class="class-img">
        <img :src="'http://cj.lightway.cc/media/'+this.classlist.img" @click="toClassDetail">
      </div>
    </div>
   </div>
    
    <appointment v-show="appointment"></appointment>
    <myself v-show="myself"></myself>

    <div class="footers">
      <div class="inner-footer"  @click="changehash">
        <router-link to="#index">
          <div :class="colorA"></div>
          <p :class="PA">报名</p>
        </router-link>
      </div>
      <div class="inner-footer"  @click="changehash">
        <router-link to="#appoint">
          <div :class="colorB"></div>
          <p :class="PB">预约练车</p>
        </router-link>
      </div>
      <div class="inner-footer" @click="changehash">
        <router-link to="#myself">
          <div :class="colorC"></div>
          <p :class="PC">我的</p>
        </router-link>
      </div>
    </div>
    
	</div>
</template>
<script type="text/ecmascript-6">
import headline from 'components/headline/headline';
import navbar from 'components/navbar/navbar';
import appointment from 'components/appointment/appointment';
import myself from 'components/myself/myself';
  export default {
    props: {
    },
    data() {
      return {
        imgs: [
         {
          id: 1,
          imgurl: 'http://pic.58pic.com/58pic/12/01/55/44558PICG8E.jpg'
         },
         {
          id: 2,
          imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492410129274&di=1301fbb5a20fdf43d301426e25efe591&imgtype=0&src=http%3A%2F%2Fimg.jiaodong.net%2Fpic%2F0%2F12%2F30%2F05%2F12300596_554909.jpg'
         },
         {
          id: 3,
          imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492406848524&di=38909ce8defb1af32386c221dc2bf24d&imgtype=0&src=http%3A%2F%2Fpic2.cxtuku.com%2F00%2F15%2F61%2Fb495faf178a8.jpg'
         }
        ],
        colorA: 'iconA_red',
        colorB: 'iconB_grey',
        colorC: 'iconC_grey',
        PA: 'p_red',
        PB: 'p_grey',
        PC: 'p_grey',
        indexpage: 'true',
        appointment: '',
        myself: '',
        hash: '',
        areaname: '',
        classlist: []
      };
    },
    watch: {
        hash: function (val, oldVal) {
          switch (val) {
          case '#index':
            this.colorA = 'iconA_red';
            this.colorB = 'iconB_grey';
            this.colorC = 'iconC_grey';
            this.PA = 'p_red';
            this.PB = 'p_grey';
            this.PC = 'p_grey';
            this.indexpage = 'true';
            this.appointment = '';
            this.myself = '';
            break;
          case '#appoint':
            this.colorA = 'iconA_grey';
            this.colorB = 'iconB_red';
            this.colorC = 'iconC_grey';
            this.PB = 'p_red';
            this.PA = 'p_grey';
            this.PC = 'p_grey';
            this.indexpage = '';
            this.appointment = 'true';
            this.myself = '';
            break;
          case '#myself':
            this.colorA = 'iconA_grey';
            this.colorB = 'iconB_grey';
            this.colorC = 'iconC_red';
            this.PC = 'p_red';
            this.PA = 'p_grey';
            this.PB = 'p_grey';
            this.indexpage = '';
            this.appointment = '';
            this.myself = 'true';
            break;
          default:
          }
        }
    },
    created() {
      this.hash = this.$route.hash;
      this.areaname = window.localStorage.x_coordinat;
      this.$http.get('api/opera/course/list/?school_id=' + 1).then((response) => {
        this.classlist = response.body.data[0];
      });
    },
    methods: {
      changehash() {
        this.hash = this.$route.hash;
      },
      toClassDetail(value) {
        this.$router.push({path: '/classDetail/' + this.classlist.id});
      }
    },
    components: {
      headline,
      navbar,
      appointment,
      myself
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /*主要文字 黑 main-fn
  次要文字 灰 se-fn
  预填文字 灰 pre-fn
  描边 灰 border 
  背景 灰白 bg 
  主题 红 theme
  辅助 蓝 assist
  背景 白 bg-white */
.index-wrap
  overflow: hidden
  .index-header
    min-height: 150px
    .index-swipe
      width: 100%
      height: 150px
      img
        width 100%
        height: 100%
    .location
      min-width: 20px
      height: 25px
      border-radius: 25px 25px
      background-color: rgb(48, 48, 48)
      opacity: 0.6
      float: right
      margin-top: -143px
      margin-right: -10px
      line-height: 25px
      text-align: center
      font-size: 13px
      color: $bg-white
      .iconl
        square-icon(10px,10px)
        icon-image('location')
        display: inline
        float: left
        margin-top: 7.2px
        margin-left: 5px
      span
        margin-left: 3px
        float: left
        margin-right: 13px
  .index-class
    min-height: 10px
    margin-top: 12px
    width: 100%
    background-color: $bg-white
    margin-bottom 60px
    .class-headline
      border-1px($border)
      a
        float: right
        margin-right 13px
        margin-top: -27px
        font-size: 13px
        color: $se-fn
        .icon-more
          display: inline
          float: right
          rectangle-icon($bg-white,7px,13px)
          icon-image('right_arrow')
          margin-left: 10px
    .class-img
      border-1px($border)
      padding 10px 20px 10px 20px
      img
        width 100%
        height auto
      //  height auto

  .footers
    height: 50px
    width: 100%
    background-color: rgb(247,247,247)
    border-top-1px($border)
    position: fixed
    bottom: 0
    left: 0
    right: 0
    display: flex
    .inner-footer
      width: 33.33% /* 百分比由导航栏数量决定 */
      height: 40px
      text-align: center
      margin-top: 6px
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      .p_grey
        font-size: 10px
        margin-top: 4px
        color: $se-fn
      .p_red
        font-size: 10px
        margin-top: 4px
        color: $theme
      .iconA_red
        rectangle-icon(rgb(247,247,247),25px,25px)
        bg-image('bm')
        margin: 0 auto
      .iconA_grey
        rectangle-icon(rgb(247,247,247),25px,25px)
        icon-image('bm_gray')
        margin: 0 auto
      .iconB_red
        rectangle-icon(rgb(247,247,247),25px,25px)
        bg-image('yy')
        margin: 0 auto
      .iconB_grey
        rectangle-icon(rgb(247,247,247),25px,25px)
        icon-image('yy_gray')
        margin: 0 auto
      .iconC_red
        rectangle-icon(rgb(247,247,247),25px,25px)
        bg-image('wd')
        margin: 0 auto
      .iconC_grey
        rectangle-icon(rgb(247,247,247),25px,25px)
        icon-image('wd_gray')
        margin: 0 auto
</style>